<script setup>
	import { ref } from 'vue'
	import personnelApi from '@/api/personnelService'
	import roomsApi from '@/api/roomsService'
	import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

	const formLabelWidth = ref('100px')
	const tableData = ref([])

	const personnelList = async () => {
		let result = await personnelApi.getpersonnelListService()
		// console.log(result.data)

		tableData.value = result.data.list
	}
	personnelList()

	// 分页相关
	const pageSize = ref(3)
	const pageNum = ref(1)
	const total = ref(20)
	const background = ref(false)
	const disabled = ref(false)

	const findByPage = async () => {
		let result = await personnelApi.findByPageService(
			pageNum.value,
			pageSize.value
		)
		// console.log(result)
		tableData.value = result.data.pr.rows
		total.value = result.data.pr.total
	}
	findByPage()

	const handleCurrentChange = (num) => {
		pageNum.value = num
		// console.log(pageNum.value)
		searchpersonnel()
	}
	const handleSizeChange = (size) => {
		pageSize.value = size
		// console.log(pageSize.value)
		searchpersonnel()
	}
	//条件查询员工
	const student = ref({})
	const searchpersonnel = async () => {
		let result = await personnelApi.searchService(
			pageNum.value,
			pageSize.value,
			student.value
		)
		// console.log(result)
		tableData.value = result.data.pr.rows
		total.value = result.data.pr.total
	}

	//查询宿舍
	const rooms = ref([])
	const roomsList = async () => {
		let result = await roomsApi.getAllRoomsService()
		// console.log(result)
		rooms.value = result.data.list
	}
	roomsList()

	const personnelInfo = ref({})
	const dialogFormVisible = ref(false)
	const dialogTitle = ref('添加员工')

	const handleEdit = (index, row) => {
		dialogFormVisible.value = true
		dialogTitle.value = '编辑员工'

		personnelInfo.value.pid = row.pid
		personnelInfo.value.pname = row.pname
		personnelInfo.value.sex = row.sex
		personnelInfo.value.age = row.age
		personnelInfo.value.addr = row.addr
		personnelInfo.value.rid = row.rid
	}

	//多选删除
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}
	const toggleSelection = async () => {
		const ids = multipleSelection.value.map((row) => row.pid).join(',')
		console.log(ids)
		let result = await personnelApi.deletepersonnelService(ids)
		console.log(result)
		searchpersonnel()
	}

	//单点删除
	const handleDelete = async (index, row) => {
		console.log(row)
		let result = await personnelApi.deletepersonnelService(row.pid)
		console.log(result)
		searchpersonnel()
	}
	const formSubmitHandler = () => {
		let result
		ElMessageBox.confirm(`确认${dialogTitle.value}吗`)
			.then(async () => {
				if (dialogTitle.value === '添加员工') {
					result = await personnelApi.addpersonnelService(
						personnelInfo.value
					)
				}
				if (dialogTitle.value === '编辑员工') {
					result = await personnelApi.editpersonnelService(
						personnelInfo.value
					)
				}
				console.log(result)
				ElNotification({
					message: result.message,
					type: result.code === 200 ? 'success' : 'error',
				})
				searchpersonnel()
			})
			.catch(() => {
				ElMessage.info('取消')
			})

		dialogFormVisible.value = false
	}

	//表单验证
	const rules = {
		p_name: [
			{
				required: true,
				message: '请输入姓名',
				trigger: 'blur',
			},
			{
				min: 5,
				max: 16,
				message: '5-16位非空字符',
				trigger: 'blur',
			},
		],
		sex: [
			{
				required: true,
				message: '请选择性别',
				trigger: 'blur',
			},
		],
		age: [
			{
				required: true,
				message: '请输入年龄',
				trigger: 'blur',
			},
		],
		addr: [
			{
				required: true,
				message: '请输入地址',
				trigger: 'blur',
			},
		],
		rid: [
			{
				required: true,
				message: '请输入宿舍号',
				trigger: 'blur',
			},
		],
	}
</script>

<template>
	<div>
		<el-container>
			<el-header>
				员工宿舍表
				<!-- <p>{{ student }}</p> -->
			</el-header>
			<el-main>
				<el-card>
					<el-form :model="student" class="student-form">
						<el-form-item label="姓名">
							<el-input
								v-model="student.pname"
								placeholder="请输入姓名" />
						</el-form-item>
						<el-form-item label="地址">
							<el-input
								v-model="student.addr"
								placeholder="请输入地址" />
						</el-form-item>
						<el-form-item label="宿舍">
							<el-select
								v-model="student.rid"
								placeholder="全部宿舍"
								style="width: 120px">
								<el-option label="全部宿舍" value="0" />
								<el-option
									v-for="(item, index) in rooms"
									:key="index"
									:label="item.raddr"
									:value="item.rid" />
							</el-select>
						</el-form-item>

						<el-form-item>
							<el-button
								plain
								type="primary"
								@click="searchpersonnel">
								搜索
							</el-button>
							<el-button
								plain
								@click="
									;(dialogFormVisible = true),
										(dialogTitle = '添加员工'),
										(personnelInfo = {})
								">
								添加
							</el-button>
							<el-button plain @click="toggleSelection()">
								删除
							</el-button>
						</el-form-item>
					</el-form>
					<el-table
						:data="tableData"
						class="student-list"
						style="width: 100%"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" />
						<el-table-column label="工号" prop="pid" />
						<el-table-column label="姓名" prop="pname" />
						<el-table-column label="性别" prop="sex" />
						<el-table-column label="年龄" prop="age" />
						<el-table-column label="地址" prop="addr" />
						<el-table-column label="宿舍" prop="rid" />
						<el-table-column label="操作">
							<template #default="scope">
								<el-button
									size="small"
									@click="
										handleEdit(scope.$index, scope.row)
									">
									编辑
								</el-button>
								<el-button
									size="small"
									type="danger"
									@click="
										handleDelete(scope.$index, scope.row)
									">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>

					<el-pagination
						v-model:current-page="pageNum"
						v-model:page-size="pageSize"
						:background="background"
						:disabled="disabled"
						:page-sizes="[2, 3, 5, 7]"
						:total="total"
						layout="total, sizes, prev, pager, next, jumper"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</el-card>
				<el-dialog
					v-model="dialogFormVisible"
					:title="dialogTitle"
					width="500">
					<el-form :rules="rules" :model="personnelInfo">
						<el-form-item
							:label-width="formLabelWidth"
							label="工号">
							<el-input
								v-model="personnelInfo.pid"
								autocomplete="off"
								disabled />
						</el-form-item>
						<el-form-item
							:label-width="formLabelWidth"
							prop="p_name"
							label="姓名">
							<el-input
								v-model="personnelInfo.pname"
								autocomplete="off" />
						</el-form-item>
						<el-form-item
							:label-width="formLabelWidth"
							prop="sex"
							label="性别">
							<el-radio-group v-model="personnelInfo.sex">
								<el-radio size="large" value="男">男</el-radio>
								<el-radio size="large" value="女">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item
							:label-width="formLabelWidth"
							prop="age"
							label="年龄">
							<el-input
								v-model="personnelInfo.age"
								autocomplete="off" />
						</el-form-item>
						<el-form-item
							:label-width="formLabelWidth"
							prop="addr"
							label="地址">
							<el-input
								v-model="personnelInfo.addr"
								autocomplete="off" />
						</el-form-item>
						<el-form-item
							:label-width="formLabelWidth"
							prop="rid"
							label="宿舍">
							<el-input
								v-model="personnelInfo.rid"
								autocomplete="off" />
						</el-form-item>
					</el-form>
					<el-button @click="dialogFormVisible = false">
						取消
					</el-button>
					<el-button type="primary" @click="formSubmitHandler">
						确定
					</el-button>
				</el-dialog>
			</el-main>
		</el-container>
	</div>
</template>

<style scoped>
	.student-list {
		text-align: center;
	}

	.student-form {
		display: flex;
		text-align: center;
		justify-content: space-around;
	}
</style>
